<template>
	<view>
		
		<!-- 贡献榜 -->
		<view  class="devote">
			<view v-if="friend_list.length == 0" class="devote_hum" style="display: flex;justify-content: center;">
				<view  style="display: flex; align-items:center;">
					<view class="hum_text">暂无贡献记录</view>
				</view>
			</view>
			<view v-else class="devote_hum" v-for="(item,index) in friend_list" @tap="toCall(item)" style="display: flex;justify-content: space-between;"> 	
				<view style="display: flex; align-items:center;">
					<image v-if="item.avatar" class="hum_img" :src=" item.avatar ? photo_cdn1+ item.avatar :  photo_cdn1+ 'zpupload/userinfo/1.png' "></image>
					<image v-else class="hum_img" :src="photo_cdn1+'zpupload/static/user/normal.png'"></image>
					<view class="hum_text">{{item.name}}</view>
				</view>		
				<view  style="display: flex; align-items:center;">
					<view class="hum_text">贡献金额:{{Math.floor(item.price_count *  100)}}</view>
					<image style="width: 60rpx;height: 60rpx;border-radius: 50%;" :src="photo_cdn1+'zpupload/static/img/reward-icon.gif'"></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import treeItem from '@/components/tree-item/tree-item.vue';
	import showtree from '@/components/showtree/showtree.vue';
	import collpanelist from '@/components/collpanelist/collpanelist.vue';
	import {getDevoteByList,getgongxianzhi} from "@/utils/api/user.js"
	import {worshipHallInfo,familyInfo,familyTreeList,familyTreeView,getArticleList,getBookList,familyList,getPhotoList,getFamilyDetail,updateFamily,updateFamilyPeople} from "@/utils/api/zupu.js";
	import {getUserinfo} from "@/utils/api/api.js";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	import xkyguidestep from "@/components/xkyguidestep/xkyguidestep.vue";
	export default {
		components:{
			treeItem,
			showtree,
			collpanelist,
			xkyguidestep
		},
		data() {
			return {
				photo_cdn1,
				view_width:0,
				wiew_height:0,
				offer_closed:1,//1关闭 0开启
				
				page:0,
				list:[],//谱文列表
				iswait:false,//谱图加载状态
				
				booksList:[],//谱书列表
				keywords:'',//搜索关键词	
				imid:'',//im系统用户id
				
				info:{},//im 信息
				showData:[],//吊谱
				people_id:'',//搜索返回的结果
				friend_list:[],//贡献列表
				
				portraits_listdata:[],//全家福数据列表
				im_msg_text:'',//提醒文字
				step:{
					name:'workbenchKey',
					guideList: [
						{
							el: '.select.active', 
							tips: '你要的结果在这~', 
							style: "border-radius: 8rpx;margin: 0",
							next:"好的"
						},]
				},
				createUserid:null,
				code:''
			}
		},
		onLoad() {
			this.getDevoteByListfun();
		},
		methods: {
			//获取贡献榜
			getDevoteByListfun(){
				getgongxianzhi().then(res=>{
					if(res.code==1){
						this.friend_list = []
						if(res.data.list.length > 0 ){
							this.friend_list = res.data.list;
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" >
	
	.treehead{
		background-color: #F7F7F7;
		width: 100%;
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 80rpx;
		/* #endif */
		left: 0;
		z-index: 999;
	}
	.navbarmin{	
		width: 100%;
		background-color: #FFFFFF;
	}
	.ordertabbar{
		height: 80upx;
		line-height: 80upx;
		width: 100%;
		background-color: #fff;
	}
	.tab_scroll{
		min-width: 800rpx;
		display: flex;
		align-items: center;
	}
	.barbox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-width: 646rpx;
		margin-left: 40rpx;
	}
	.tabitems{
		position: relative;
		color: #CCCCCC;
		font-size: 34upx;
		flex: 1;
		text-align: center;
	}
	.tabitems.actives{
		color: #C79F62;
		font-size: 34upx;
		position: relative;
	}
	.tabitems.actives::before{
		content: '';
		position: absolute;
		bottom: 5rpx;
		left: 44%;
		background-color: #C79F62;
		width: 34rpx;
		height: 8rpx;
		border-radius: 4rpx;
	}
	
	.tree_tab{
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 0 20rpx;
		justify-content: space-between;
		align-items: center;
		height: 92rpx;
		background-color: #FFFFFF;
		.tree_search{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			background-color: #F0F0F0;
			padding: 14rpx 30rpx;
			min-width: 150rpx;
			margin-left: 10rpx;
			border-radius: 30rpx;
			.sear_img{
				width: 25rpx;
				height: 20rpx;
				margin-right: 12rpx;
			}
			.sear_text{
				font-size: 26rpx;
			}
		}
	
		.tab_bar{
			font-size: 30rpx;
			color: #666666;
		}
		.tab_bar.active{
			// width: 116rpx;
			padding: 0 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 30rpx;
			background-color: #C79F62;
			color: #FFFFFF;
		}
		.tab_right{
			width: 30%;
			display: flex;
			justify-content: center;
			align-items: center;
			.tab_bar{
				font-size: 30rpx;
				color: $themecolor;
			}
			.tab_jian{
				width: 14rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
		}
	}
	
	
	
	.pu_tree{
		background-size: cover;
		background-repeat: no-repeat;
		box-sizing: border-box;
		padding-top: 120rpx;	
	    position: relative;
		overflow: hidden;
		z-index:101;
		background-color: #FBF2E2;
		min-height: 100vh;
		.initial{
			position: fixed;
			bottom: 3%;
			left: 10%;
			width: 80%;
			height: 90rpx;
			border-radius: 60rpx;
			margin: 0 auto;
			margin-top: 100rpx;
			background-color: $themecolor;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	    .tree-content{
			min-height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			// transform: scale(0.5);
	    }
		.operation{
			background-color: #FFFFFF;
			padding: 65rpx 60rpx 50rpx 60rpx;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.operation_title{
				font-weight: bold;
				font-size: 30rpx;
				text-align: center;
				margin-bottom: 28rpx;
			}
			.operation_btn{
				background-color: $themecolor;
				box-sizing: border-box;
				padding: 22rpx 0rpx;
				text-align: center;
				color: #FFFFFF;
				width: 400rpx;
				font-size: 26rpx;
				border-radius: 10rpx;
				margin-top: 30rpx;
			}
		}
	}
	.tree_human_scroll{
		width: 100%;
		white-space: nowrap;
	}
	.devote{
		background-color: #F7F7F7;
		min-height: 100vh;
		// padding-top: 96rpx;
		.devote_hum{
			display: flex;
			align-items: center;
			background-color: #fff;
			margin: 10rpx;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			.hum_img{
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
			.hum_text{
				margin-left: 23rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
		}
	}
	.tree_human{
		background-size: cover;
		background-repeat: no-repeat;
		box-sizing: border-box;
		width: 100%;
		padding-right: 40rpx;
		padding-top: 20rpx;
		position: fixed;
		z-index: 899;
		top: 110rpx;
		/* #ifdef H5 */
		top: 180rpx;
		/* #endif */
		left: 0;
		background-color: #FBF2E2;
	}
	.legacy_box{
		display: flex;
		align-items: center;
		margin: 0 30rpx 20rpx 30rpx;
		.legacy_text{
			font-size: 30rpx;
			font-weight: 800;
		}
		.real_avatar{
			width: 46rpx;
			height: 46rpx;
			border-radius: 50%;
		}
		.legacy{
			color: $themecolor;
			font-size: 30rpx;
			margin-left: 10rpx;
		}
	}
	.pu_article{
		background-color: #F7F7F7;
		padding: 20rpx 20rpx 0 20rpx;
		box-sizing: border-box;
		margin-top: 90rpx;
	}
	.create_article{
		position: fixed;
		z-index: 99;
		left:0;
		bottom: 0;
		width: 100%;
		display: block;
		background-color: #FFFFFF;
		padding: 20rpx;
		box-sizing: border-box;
		.create_btn{
			background-color: $themecolor;
			color: #FFFFFF;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 36rpx;
			border-radius: 40rpx;
			
		}
	}
	.tree_popup_view{
		position: relative;
		.closeicon{
			position: absolute;
			z-index: 9;
			top: -70rpx;
			right: -30rpx;
			width: 70rpx;
			height: 70rpx;
		}
	}
	.pu_book{
		background-color: #F7F7F7;
		margin-top: 40rpx;
		.pu_book_list{
			padding-top: 80rpx;
		}
		.zupus_item{
			padding: 18rpx 30rpx;
			margin-bottom: 20rpx;
			width: 100%;
			height: 256rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			position: relative;
			.itemimgss{
				width: 146rpx;
				height: 220rpx;
				position: relative;
				.family_name{
					z-index: 2;
					position: absolute;
					top: 16rpx;
					left: 98rpx;
					writing-mode: vertical-lr;
					// font-size: 30rpx;
					height: 144rpx;
					text-align: center;
				}
			}
			.zpimgs{
				width: 146rpx;
				height: 220rpx;
				background-size: 100% 100%;
			}
			.zupus_item_info{			
				margin-left: 64rpx;
				.read_book{
					border-radius: 8rpx;
					margin-top: 10rpx;
					display: inline-block;
					padding: 10rpx 20rpx;
					background-color: $themecolor;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.zupu_names{
					color: #000000;
					font-size: 30rpx;
					font-weight: bold;
					line-height: 1;
				}
				.fqr_text{
					margin-top: 20rpx;
					color: #000000;
					font-size: 24rpx;
					line-height: 1;
				}
				.rprs_text{
					margin-top: 20rpx;
					color: #000000;
					font-size: 24rpx;
					line-height: 1;
				}
				.create_time{
					margin-top: 20rpx;
					color: #000000;
					font-size: 24rpx;
					line-height: 1;
				}
				.editzp{
					width: 40rpx;
					height: 40rpx;
					z-index: 2;
					position: absolute;
					right: 30rpx;
					top: 30rpx;
				}
				.contactccr{
					color: #FFFFFF;
					background-color: $themecolor;
					display: inline-block;
					padding: 10rpx 20rpx;
					border-radius: 14rpx;
				}
			}
		}
		.create_pubook{
			width: 100%;
			padding: 20rpx;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			.pubook_btn{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: $themecolor;
				color: #FFFFFF;
				font-size: 36rpx;
				text-align: center;
				border-radius: 40rpx;
			}
		}
	}
	.sel_select{
		padding: 40rpx 30rpx 70rpx 30rpx;
		background-color: #FFFFFF;
		.sel_title{
			font-size: 40rpx;
			font-weight: 800;
			margin-bottom: 40rpx;
		}
		.sel_scroll{
			
			.sel_imgbox{
				width: 270rpx;
				height: 440rpx;
				border: 2rpx solid #B3B3B3;
				border-radius: 8rpx;
				margin-right: 22rpx;
				.sel_img{
					width: 250rpx;
					height: 360rpx;
					border-radius: 8rpx;
				}
				.img_text{
					font-size: 30rpx;
					// margin-top: 24rpx;
					text-align: center;
				}
			}
			.sel_imgbox.active{
				border: 2rpx solid $themecolor;
			}
		}
	}
	.info_list{
		margin-top: 30rpx;
		padding: 40rpx 40rpx 0 40rpx;
		background-color: #FFFFFF;
		.info_title{
			font-size: 40rpx;
			font-weight: 800;
			margin-bottom: 50rpx;
		}
		.op_box{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0rpx;
			.op_title{
				font-size: 36rpx;
				color: #000000 ;
			}
		}
		.edit_line{
			width: 100%;
			height: 1rpx;
			background-color: #E5E5E5;
		}
		.edit_input_tag{
			display: flex;
			justify-content: flex-end;
			font-size: 30rpx;
		}
	}
	.book_content{
		padding: 40rpx 30rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		margin-top: 30rpx;
		.content_title{
			font-size: 40rpx;
			font-weight: 800;
		}
		.editcont{
			font-size: 30rpx;
			color: $themecolor;
		}
		.editimg{
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;			
		}
	}
	.book_create{
		background-color: #FFFFFF;
		padding: 20rpx 40rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		
		.bookte_btn{
			background-color: $themecolor;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 30rpx;
			border-radius: 14rpx;
			
		}
	}
	.show_pu{
		width: 100%;
		box-sizing: border-box;
		position: relative;
		.uniscrollviews{
			padding-top: 88rpx;
			width: 100%;
			background-color: #FBF2E2;
			box-sizing: border-box;
			min-height: 100vh;
		}
		.tree-content{
			min-height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			// transform: scale(0.5);
		}
		.pu_wait{
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			margin-top: 40rpx;
			
		}
	}
	
	//全家福
	.familyportraits{
		padding-top: 96rpx;
		
		//发布按钮
		.sends_push_qjf_main{
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 16rpx 40rpx;
			height: 120rpx;
			.sends_push_qjf_ntns{
				width: 650rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: $themecolor;
				color: #FFFFFF;
				border-radius: 14rpx;
			}
		}
		// .sends_push_qjf{
		// 	.sends_push_btn{
		// 		width: 40rpx;
		// 		height: 40rpx;
		// 	}
		// 	.add_text{
		// 		font-size: 20rpx;
		// 		color: $themecolor;
		// 	}
		// }
	}
	.familyportraits_list{
		padding: 18rpx;
		.familyportraits_item{
			margin-bottom: 30rpx;
			width: 350rpx;
			height: 520rpx;
			// background: #D2D2D2;
			box-shadow: #fffbfb 0px 6px 1px 1px;
			border-radius: 13rpx;
			.familyportraits_img{
				border-radius: 13rpx;
				width: 350rpx;
				height: 400rpx;
			}
			.familyportraits_footer{
				padding: 10rpx 20rpx;
				.familyportraits_title{
					color: #000000;
					font-size: 28rpx;
				}
			}
			
		}
		.emptytag{
			width: 100%;
			text-align: center;
		}
	}
	
	
	
	.ancestraltraining{
		padding: 120rpx 54rpx 0 54rpx;
		.profile{
			.profile_title{
				font-size: 40rpx;
				font-weight: 600;
			}
			.profile_addr{
				color: #737373;
				font-size: 30rpx;
				margin: 20rpx 0 26rpx 0;
			}
			.profile_hum{
				display: flex;
				align-items: center;
				margin-bottom: 6rpx;
				.hum_avtar{
					width: 46rpx;
					height: 46rpx;
					border-radius: 50%;
				}
				.hum_name{
					display: flex;
					text-decoration: underline;
					color: #C79F62;
					font-size: 30rpx;
					margin-left: 20rpx;
				}
				.hum_name_m{
					color: #C79F62;
					font-size: 30rpx;
				}
			}
		}
		.ancestraltraining_text{
			color:#999999;
			font-size: 32rpx;
			text-indent: 2em;
			margin-top: 20rpx;
			line-height: 50rpx;
			text-align: justify;
		}
	}

</style>
